<template>
	<view class="store_page">
		<u-navbar fixed placeholder bgColor="#fff">
			<template #left>
				<text class="nav_title">商铺审核</text>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
      <u-sticky>
        <u-tabs
          :list="tabList"
          :scrollable="false"
          :current="activeTab"
          :lineWidth="50"
					lineColor="linear-gradient(90deg, #2782FE 0%, rgba(39,130,254,0) 100%);"
          :lineHeight="4"
          :inactiveStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#636363',
           }"
          :activeStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#333',
          }"
          @click="(item) => changeTab(item.index)"
        >
        </u-tabs>
      </u-sticky>
      <view class="tab_box">
				<view class="date_picker_box">
					<view class="date_picker"@click="show = true" >
						<text class="date_format">{{beginCreateTime}}</text>
						<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
					</view>
					<u-datetime-picker ref="datetimePicker" :value="beginCreateTime" mode="date" :show="show" @confirm="datePickerConfirm" @cancel="show = false"></u-datetime-picker>
				</view>
        <u-empty
          v-if="!shopList.length"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
        >
        </u-empty>
				<view v-else>
					<view class="store_box" v-for="shop in shopList" :key="shop.id">
					  <view class="info_box" @click="lookDetail(shop.id)">
					    <view class="line_1">
					      <u-avatar class="avatar" shape="square" size="66" :src="shop.doorImg"></u-avatar>
					      <view class="info">
					        <view class="store_name_box">
										<span class="store_name">{{shop.name}}</span>
										<view class="audit_status">
											<view v-if="shop.auditStatus === '0'" class="tag wait">待审核</view>
											<view v-else-if="shop.auditStatus === '1'" class="tag agree">已通过</view>
											<view v-else-if="shop.auditStatus === '2'" class="tag refuse">已驳回</view>
										</view>
									</view>
					        <view class="tags">
					          申请时间：{{shop.createTime}}
					        </view>
					      </view>
					    </view>
					    <view class="line_2">
					      <text class="label">归属景区：</text>
					      <text class="desc">{{shop.jingquName}}</text>
					    </view>
					    <view class="line_3">
					      <text class="label">店铺地址：</text>
					      <text class="desc">{{shop.address}}</text>
					    </view>
					  </view>
					  <u-divider></u-divider>
					  <view class="btn_box">
					    <view class="btn_item refuse" @click="qiyeAudit(shop.id, '2')">驳回</view>
					    <view class="btn_item agree" @click="qiyeAudit(shop.id, '1')">通过</view>
					  </view>
					</view>
				</view>
      </view>
		</scroll-view>
	</view>
</template>

<script>

import {getQiyeList, qiyeAudit, qiyeDel} from "@/api/shop";
import { dayjs } from "@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min";

  export default {
    onLoad(option) {
      if (option.activeTab) {
        this.activeTab = Number(option.activeTab)
      }
			this.beginCreateTime = dayjs().format('YYYY-MM-DD')
      this.getQiyeList()
    },
		data() {
			return {
				tabList: [
					{ name: '待审核' },
					{ name: '审核通过' },
					{ name: '审核驳回' }
				],
				activeTab: 0,
        shopList: [],
				show: false,
				beginCreateTime: ''
			}
		},
    computed: {
      navBarHeight () {
        const platform = uni.getSystemInfoSync().platform
        const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
        let navHeight = 0
        if (['ios', 'devtools'].includes(platform)) {
          navHeight = 44
        } else {
          navHeight = 48
        }
        return navHeight + statusBarHeight
      },
      auditStatus () {
        if (this.activeTab === 0) return '0'
        if (this.activeTab === 1) return '1'
        if (this.activeTab === 2) return '2'
      }
    },
		methods: {
			datePickerConfirm (event) {
				console.warn(event)
				this.beginCreateTime = dayjs(event.value).format('YYYY-MM-DD')
				this.show = false
				this.getQiyeList()
			},
      /**
       * @param auditStatus
       * 0: 待审批 1：已通过 2：已驳回
       * @returns {Promise<void>}
       */
      async getQiyeList () {
        const { code, data, msg } = await getQiyeList({
          auditStatus: this.auditStatus,
					beginCreateTime: this.beginCreateTime,
					endCreateTime: '9999-12-31'
        })
        if (code === 200) {
          this.shopList = data.rows || []
        } else {
          this.$modal.msgError(msg)
        }
      },
			async qiyeAudit(shopId, auditStatus) {
				const { code, data, msg } = await qiyeAudit({
					id: shopId,
					auditStatus
				})
				if (code === 200) {
					uni.showToast({
						title: '审核成功',
						success: () => {
							setTimeout(() => {
								this.getQiyeList()
							}, 1500)
						}
					})
				} else {
					this.$modal.msgError(msg)
				}
			},
			changeTab (index) {
				this.activeTab = index
        this.getQiyeList()
			},
      lookDetail (shopId) {
        uni.navigateTo({
          url: '/pages/work/detail?shopId=' + shopId
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.store_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;
		.nav_title {
			font-size: 36rpx;
			font-weight: 400;
			color: #000000;
		}
		.content {
			box-sizing: border-box;
			::v-deep .u-tabs {
				background-color: #fff;
			}
			.tab_box {
				padding: 16rpx;
				box-sizing: border-box;
				.date_picker_box {
					margin: 16rpx 0;
					.date_picker {
						width: 200rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.date_format {
							margin-right: 20rpx;
						}
					}
				}
				.store_box {
					background-color: #fff;
					border-radius: 16rpx;
					padding: 32rpx;
					margin-bottom: 16rpx;
					
					.info_box {
						.line_1 {
							display: flex;
							align-items: center;
							margin-bottom: 32rpx;
							.avatar {
								width: 112rpx;
								height: 112rpx;
							}
							.info {
								width: 100%;
								margin-left: 32rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.store_name_box {
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									.store_name {
										font-size: 36rpx;
										font-weight: 500;
										color: #333333;
										margin-bottom: 16rpx
									}
									.tag {
										width: 104rpx;
										height: 36rpx;
										border-radius: 4rpx;
										font-size: 28rpx;
										font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
										font-weight: 400;
										display: flex;
										align-items: center;
										justify-content: center;
									}
									.wait {
										color: #2FB345;
										background-color: #E8FFED;
									}
									.agree {
										color: #2246FC;
										background-color: #DBE1FF;
									}
									.refuse {
										color: #E43030;
										background-color: #FCEAEA;
									}
								}
							}
						}
						.line_2, .line_3 {
							margin-bottom: 32rpx;
							.label {
								font-size: 32rpx;
								font-weight: 400;
								color: #999999;
							}
							.desc {
								font-size: 32rpx;
								font-weight: 400;
								color: #333333;
							}
						}
					}
					.btn_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn_item {
							font-size: 32rpx;
							font-weight: 400;
						}
						.refuse {
							width: 50%;
							text-align: center;
							color: #ED4545;
						}
						.agree {
							width: 50%;
							text-align: center;
							color: #0A87FC;
							border-left: 2rpx solid #EEEEEE;
						}
					}
				}
			}
		}
	}
</style>
